{% extends 'base-layui.html' %}

{% block header %}
  <h1>{% block title %}数据库表结构比对系统{% endblock %}</h1>
  <!-- 引入 layui.js -->
<!--<link rel="stylesheet" href="layui/js/layui.js">-->
{% endblock %}

{% block leftcatalog %}
<ul class="layui-nav layui-nav-tree" lay-filter="test">
  <li class="layui-nav-item layui-this"><a href="/configDatabaseSource">配置数据源</a></li>
  <li class="layui-nav-item"><a href="/configCompareTask">表模型比对</a></li>
<!--  <li class="layui-nav-item"><a href="javascript:;">表差异比对</a></li>-->
<!--  <li class="layui-nav-item"><a href="/compareColumn">字段差异比对</a></li>-->
<!--  <li class="layui-nav-item">-->
<!--    <a href="/compare">所有表及字段信息</a>-->
<!--  </li>-->

  <!-- 更多菜单 -->
</ul>
{% endblock %}

{% block maincontent %}



<form class="layui-form layui-row layui-col-space16" >
  <div class="layui-col-md3">
    <div class="layui-input-wrap">
      <div class="layui-input-prefix">
        <i class="layui-icon layui-icon-app"></i>
      </div>
      <input  type="text" id="connect_name" name="connect_name" value="{{ connect_name }}" placeholder="数据源名称" class="layui-input" lay-affix="clear">
    </div>
  </div>
  <div class="layui-col-md3">
    <div class="layui-input-wrap">
      <div class="layui-input-prefix">
        <i class="layui-icon layui-icon-fonts-i"></i>
      </div>
      <input  type="text" id="host" name="host" value="{{ host }}" placeholder="主机IP" lay-affix="clear" class="layui-input">
    </div>
  </div>
  <div class="layui-col-md3">
    <div class="layui-btn-container layui-col-xs12">
      <button  class="layui-btn" lay-submit lay-filter="demo-table-search">
        <i class="layui-icon layui-icon-search"></i>查询
      </button>
      <button  type="reset" class="layui-btn layui-btn-primary">
        <i class="layui-icon layui-icon-set-sm"></i>重置
      </button>
    </div>
  </div>
</form>


<table class="layui-hide" id="ID-table-demo-search">
</table>

<script type="text/html" id="toolbarDemo">

  <div class="layui-btn-container">

    <div class="layui-col-md2">
      <div class="layui-btn-container layui-col-xs6">
        <button class="layui-btn" lay-event="add" onclick="addDatabaseSource();">
          <i class="layui-icon layui-icon-add-circle-fine"></i>添加数据源
        </button>
      </div>
    </div>

  </div>

</script>

{% endblock %}

{% block script %}



<!--<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>-->

<script type="text/html" id="barOption">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="more">
      更多
      <i class="layui-icon layui-icon-down"></i>
    </a>
  </div>
</script>

<!-- 表格操作按钮集 -->
<!--<script type="text/html" id="barOption">
    <a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-mini layui-btn-normal" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-mini layui-btn-danger" lay-event="del">删除</a>
</script>-->

<script src="{{ url_for('static', filename='layui/layui.js') }}"></script>
<script>

  var connect_name_tmp = getUrlParam("connect_name");
  var host_tmp = getUrlParam("host");
  // console.log("getUrlParams(\"table_name\") = " + table_name_tmp);
  document.getElementById("connect_name").value = connect_name_tmp;
  document.getElementById("host").value = host_tmp;

layui.use(['table', 'form', 'layer', 'dropdown'], function(){
  var $ = layui.$;
  var table = layui.table;
  var layer = layui.layer;
  var form = layui.form;
  var dropdown = layui.dropdown;

  // 渲染
  table.render({
    elem: '#ID-table-demo-search',
    url: '/getConfigDatabaseSourceData',  // 此处为静态模拟数据，实际使用时需换成真实接口
    // page: true,
    page : {
        //limits :[10,20,50,100]
        //count: data.length             //数据总数
        limit : 10 //每页显示条数
        ,
        limits : [ 10, 20, 50, 100, 1000 ],
        curr : 1 //起始页
        ,
        groups : 5 //连续页码个数
        ,
        prev : '上一页' //上一页文本
        ,
        next : '下一页' //下一页文本
        ,
        first : 1 //首页文本
        //, last: 100                     //尾页文本
        ,
        layout : [ 'prev', 'page', 'next',
                'refresh', 'skip', 'count',
                'limit' ]
    },
    height : 700,
    // toolbar : true,
    toolbar: '#toolbarDemo',
    defaultToolbar: ['filter', 'exports'],
    where : {
      "connect_name"  : connect_name_tmp,
      "host" : host_tmp
    },
    cols: [
      [ // 表头
        // {type: 'checkbox', fixed: 'left'},
        {field: 'connect_name', title: '数据源名称', width:200, align: 'left', fixed: 'left', templet: addlink },
        {field: 'database_type', title: '数据库类型', width:130, align: 'center'},
        {field: 'host', title: 'IP', width:150, align: 'left'},
        {field: 'port', title: '端口', width:120, align: 'left'},
        {field: 'dbname', title: '数据库名', width:200, align: 'left'},
        {field: 'username', title: '用户名', width:200, align: 'left'},
        // {field: 'password', title: '密码', width:150, align: 'left'},
        {field: 'last_update_date', title: '最后更新时间', width:180, align: 'left'},
        {field: 'description', title: '描述', width:280, align: 'left'},
        {fixed: 'right', title:'操作', width: 134, minWidth: 350, toolbar: '#barOption'}
      ]
    ],
    loading : true,
    done: function(res, curr, count){
      // console.log(res);
    }
  });

  // 触发单元格工具事件
  table.on('tool(ID-table-demo-search)', function(obj){ // 双击 toolDouble
    var data = obj.data; // 获得当前行数据
    // console.log(obj)
    if(obj.event === 'edit'){
<!--      layer.open({-->
<!--        title: '编辑 - id:'+ data.id,-->
<!--        type: 1,-->
<!--        area: ['80%','80%'],-->
<!--        // content: '<div style="padding: 16px;">自定义表单元素</div>'-->
<!--        content:'/editDatabaseSource'-->
<!--      });-->

      layui.use('layer', function(){
          var layer = layui.layer;
          //layer.msg('hello');
          layer.open({
              type:2,
              offset:'auto',
              // title:'编辑数据源 - id:'+ data.id,
              title:'编辑数据源 - '+ data.connect_name,
              skin:'layui-layer-rim',//加上边框
              shadeClose:true,
              chade:false,
              maxmin:true,
              area:['1030px','650px'],//宽高
              //content:'${pageContext.request.contextPath}/fl/cishu1.jsp?id='+data.info_Id
              content:'/editDatabaseSource?id='+ data.id
          });
      });

    } else if(obj.event === 'more'){
      // 更多 - 下拉菜单
      dropdown.render({
        elem: this, // 触发事件的 DOM 对象
        show: true, // 外部事件触发即显示
        data: [{
          title: '查看',
          id: 'detail'
        },{
          title: '测试连接',
          id: 'checkConnect'
        },{
          title: '初始化表结构数据到比对系统',
          id: 'initDatabaseDataToCompareSystem'
        },{
          title: '删除',
          id: 'del'
        }],
        click: function(menudata){
          if(menudata.id === 'detail'){
            // layer.msg('查看操作，当前行 ID:'+ data.id);

            layui.use('layer', function(){
              var layer = layui.layer;
              //layer.msg('hello');
              layer.open({
                  type:2,
                  offset:'auto',
                  title:'查看数据源',
                  skin:'layui-layer-rim',//加上边框
                  shadeClose:true,
                  chade:false,
                  maxmin:true,
                  area:['1030px','650px'],//宽高
                  //content:'${pageContext.request.contextPath}/fl/cishu1.jsp?id='+data.info_Id
                  content:'/detailDatabaseSource?id='+ data.id
              });
            });

          } else if(menudata.id === 'checkConnect'){
            // 测试连接
            // 使用Layui的layer.load显示加载层
            var loadIndex = layer.load(2);
            // 此处可执行 Ajax 等操作
            var databaseSourceDataOfFormJson = JSON.stringify(data)
            // console.log(databaseSourceDataOfFormJson);
            $.ajax({
                url:'/checkDatabaseSourceLink',
                // type:'post',
                contentType:"json",
                data: { // 提交数据
                       "databaseSourceDataOfForm": databaseSourceDataOfFormJson
                },
                success:function(data){
                    layer.close(loadIndex); // 关闭加载层
                    // alert(data);
                    if (data == "Successfully connected to database") {
                      layer.alert('连接数据库成功！', {
                        icon: 1,
                        shadeClose: true,
                        title: '提示'
                      });
                    } else {
                      layer.alert('连接数据库失败！', {
                        icon: 2,
                        shadeClose: true,
                        title: '提示'
                      });
                    }
                },
                error:function(){
                    layer.close(loadIndex); // 关闭加载层
                    alert("Ajax请求错误！");
                }
            });

          } else if(menudata.id === 'initDatabaseDataToCompareSystem'){
            // 测试连接
            // 使用Layui的layer.load显示加载层
            var loadIndex = layer.load(2);
            // 此处可执行 Ajax 等操作
            var databaseSourceDataOfFormJson = JSON.stringify(data)
            // console.log(databaseSourceDataOfFormJson);
            $.ajax({
                url:'/initDatabaseDataToCompareSystem',
                // type:'post',
                contentType:"json",
                data: { // 提交数据
                       "databaseSourceDataOfForm": databaseSourceDataOfFormJson
                },
                success:function(data){
                    layer.close(loadIndex); // 关闭加载层
                    // alert(data);
                    if (data == "Successfully init_database_data") {
                      layer.alert('初始化表结构数据成功！', {
                        icon: 1,
                        shadeClose: true,
                        title: '提示'
                      });
                    } else {
                      layer.alert(data, {
                        icon: 2,
                        shadeClose: true,
                        title: '提示'
                      });
                    }
                },
                error:function(){
                    layer.close(loadIndex); // 关闭加载层
                    // alert("Ajax请求错误！");
                    layer.alert("Ajax请求错误！", {
                        icon: 2,
                        shadeClose: true,
                        title: '提示'
                    });
                }
            });

          } else if(menudata.id === 'del'){
            // layer.confirm('真的删除行 [id: '+ data.id +'] 么', function(index){
            layer.confirm('真的删除数据源 [ '+ data.connect_name +' ] 么？', function(index){
              // obj.del(); // 删除对应行（tr）的DOM结构
              layer.close(index);
              // 向服务端发送删除指令
              $.ajax({
                  url:'/deleteDatabaseSourceData',
                  // type:'post',
                  contentType:"json",
                  data: { // 提交数据
                         "id": data.id // 前者为字段名，后者为数据
                         // "password": "admin"
                  },
                  success:function(data){
                      // alert(data);
                      if (data == "deleteDatabaseSourceData execute success") {
                        alert('数据源删除成功！');
                        parent.layui.table.reload('ID-table-demo-search', {
                          url: '/getConfigDatabaseSourceData' // 重新从这个URL加载数据
                        });
                        // 关闭当前窗口
                        // var index1 = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        // parent.layer.close(index1); //再执行关闭
                      }
                      // obj=JSON.parse(data);
                  },
                  error:function(){
                      alert("Ajax请求错误！");
                  }
              });

            });
          }
        },
        align: 'right', // 右对齐弹出
        style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
      })
    } else if(obj.event === 'infoDetail'){
      layui.use('layer', function(){
        var layer = layui.layer;
        //layer.msg('hello');
        layer.open({
            type:2,
            offset:'auto',
            title:'查看数据源',
            skin:'layui-layer-rim',//加上边框
            shadeClose:true,
            chade:false,
            maxmin:true,
            area:['1030px','650px'],//宽高
            //content:'${pageContext.request.contextPath}/fl/cishu1.jsp?id='+data.info_Id
            content:'/detailDatabaseSource?id='+ data.id
        });
      });
    }
  });


  // 搜索提交
  form.on('submit(demo-table-search)', function(data){
    var field = data.field; // 获得表单字段
    // 执行搜索重载
    table.reload('ID-table-demo-search', {
      page: {
        curr: 1 // 重新从第 1 页开始
      },
      // url: '/getCompareColumnData',  // 此处为静态模拟数据，实际使用时需换成真实接口
      where : {
        "connect_name"  : connect_name_tmp,
        "host" : host_tmp
      }
    });
    // layer.msg('搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可');
    return true; // 阻止默认 form 跳转
  });



});

//获取地址栏参数，key:参数名称
function getUrlParams(key) {
	let reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
	let r = window.location.search.substr(1)
		.match(reg);
	if (r != null)
		return unescape(r[2]);
	return null;
}
//获取地址栏参数//可以是中文参数
function getUrlParam(key) {
    // 获取参数
    var url = window.location.search;
    // 正则筛选地址栏
    var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
    // 匹配目标参数
    var result = url.substr(1).match(reg);
    //返回参数值
    return result ? decodeURIComponent(result[2]) : null;
}

function addDatabaseSource(){
  layui.use('layer', function(){
      var layer = layui.layer;
      //layer.msg('hello');
      layer.open({
          type:2,
          offset:'auto',
          title:'添加数据源',
          skin:'layui-layer-rim',//加上边框
          shadeClose:true,
          chade:false,
          maxmin:true,
          area:['1030px','650px'],//宽高
          //content:'${pageContext.request.contextPath}/fl/cishu1.jsp?id='+data.info_Id
          content:'/addDatabaseSource'
      });
  });
}

var addlink = function (d) {
  var html = '<div><a rel="nofollow" style="color:#1E9FFF" href="javascript:void(0);" lay-event="infoDetail">'
             + d.connect_name+ '</a></div>';
  return html
}

</script>

{% endblock %}